<template>
  <view class="list-page">
    <view class="header">
      <uni-icon class="back-icon" type="back" size="24" @click="goBack"></uni-icon>
      <text class="title">Java 基础面试题</text>
      <uni-icon class="more-icon" type="more" size="24" @click="showMoreOptions"></uni-icon>
    </view>
    <view class="question-list">
      <view class="question-item" v-for="(item, index) in questionList" :key="index" @tap="navigateToQuestion(item)">
        <text class="question-text">{{ item.text }}</text>
        <uni-icon class="arrow-icon" type="right" size="24"></uni-icon>
      </view>
    </view>
<!--    <view class="footer">
      <button class="start-button" @tap="goToQuestionPage">开始刷题</button>
    </view> -->
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 定义问题列表
const questionList = ref([
  { id: 1, text: '你认为 Java 的优势是什么？' },
  { id: 2, text: '什么是 Java 的多态特性？' },
  { id: 3, text: 'Java 中的参数传递是按值还是按引用？' },
  { id: 4, text: '接口和抽象类有什么区别？' },
  { id: 5, text: '为什么 Java 不支持多重继承？' },
  { id: 6, text: 'Java 中的序列化和反序列化是什么？' },
  { id: 7, text: '什么是 Java 中的不可变类？' },
  { id: 8, text: 'Java 中 Exception 和 Error 有什么区别？' },
  { id: 9, text: 'Java 面向对象编程与面向过程编程的区别是什么？' },
  { id: 10, text: 'Java 方法重载和方法重写之间的区别是什么？' },
  { id: 11, text: '什么是 Java 内部类？它有什么作用？' },
  { id: 12, text: 'JDK8 有哪些新特性？' }
]);

// 点击返回按钮
function goBack() {
  uni.navigateBack();
}

// 显示更多选项
function showMoreOptions() {
  console.log('Show more options');
}

// 选择问题
function navigateToQuestion(subItem) {
console.log(`Selected question: ${subItem.text}`);
  uni.navigateTo({
    url: `/pages/category/question?item=${encodeURIComponent(JSON.stringify(subItem))}`
  });
}

// 开始刷题
function goToQuestionPage(subItem) {
  uni.navigateTo({
    url: `/pages/category/question?item=${encodeURIComponent(JSON.stringify(subItem))}`, // 修正参数
  });
}
</script>

<style scoped>
.list-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.back-icon, .more-icon {
  margin: 0 10rpx;
}

.title {
  flex: 1;
  font-size: 32rpx;
  font-weight: bold;
}

.question-list {
  padding: 20rpx;
}

.question-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1px solid #eee;
}

.question-text {
  flex: 1;
  font-size: 28rpx;
}

.arrow-icon {
  margin-left: 10rpx;
}

.footer {
  padding: 20rpx;
  text-align: center;
}

.start-button {
  width: 80%;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  background-color: #ffcc00;
  border-radius: 40rpx;
  color: #fff;
}
</style>